---
import Card from "../components/Card.astro";
import Modal from "../components/Modal.astro";
import { SEO } from "astro-seo";
---

<!doctype html>
<html lang="en">
	<head>
		<link
			rel="icon"
			type="image/png"
			href="/favicon-96x96.png"
			sizes="96x96"
		/>
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<link rel="shortcut icon" href="/favicon.ico" />
		<link
			rel="apple-touch-icon"
			sizes="180x180"
			href="/apple-touch-icon.png"
		/>
		<meta name="apple-mobile-web-app-title" content="Fangd123's Lab" />
		<link rel="manifest" href="/site.webmanifest" />
		<SEO
			title="Fangd123's Lab - 探索AI、播客与AIGC工具"
			description="欢迎来到Fangd123的实验室，这里汇集了最新的AI资讯、中文播客数据平台、AIGC工具集以及精选的微信公众号内容。"
			openGraph={{
				basic: {
					title: "Fangd123's Lab - 探索AI、播客与AIGC工具",
					type: "website",
					image: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
				},
			}}
			twitter={{
				creator: "@fangd123",
			}}
			extend={{
				link: [{ rel: "icon", href: "/favicon.ico" }],
				meta: [
					{
						name: "twitter:image",
						content:
							"https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
					},
					{
						name: "twitter:title",
						content: "Fangd123's Lab - 探索AI、播客与AIGC工具",
					},
					{
						name: "twitter:description",
						content:
							"欢迎来到Fangd123的实验室，这里汇集了最新的AI资讯、中文播客数据平台、AIGC工具集以及精选的微信公众号内容。",
					},
				],
			}}
		/>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/x-icon" href="/favicon.png" />
		<meta name="generator" content={Astro.generator} />
		<title>Fangd123's Lab</title>
	</head>
	<body>
		<main>
			<h1><span class="text-gradient">Fangd123</span>'s Lab</h1>
			<p class="instructions">
				<strong
					>The best way to predict the future is to create it.</strong
				><br />
				<span class="text-right-italic">Peter Drucker.</span>
			</p>
			<ul role="list" class="link-card-grid">
				<Card
					href="https://llminfo.tech/"
					title="AI 最新资讯"
					body="传递最有价值的 AI 资讯"
				/>
				<Card
					href="https://blog.fangd123.com"
					title="达子茶谈"
					body="日知其所亡，月无忘所能"
				/>
				<Card
					href="https://bokedata.org"
					title="中文播客数据平台"
					body="查看播客收听排行，探索感兴趣的播客"
				/>
				<Card
					href="https://aitools100.com"
					title="AIGC 工具集"
					body="汇聚各类AIGC工具，让AI为你服务"
				/>
				<Card
					href="https://wxgzh.fangd123.com"
					title="微信公众号内容精选"
					body="精选优质微信公众号文章"
				/>
				<Card
					href="/"
					title="请我喝茶"
					body="赏吾之作，赠茶以策吾之志️"
				/>
			</ul>
		</main>
		<Modal />
	</body>
</html>

<style>
	:root {
		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
		--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
		--color-text: hsl(12, 5%, 4%);
		--color-bg: hsl(10, 21%, 95%);
		--color-border: hsl(17, 24%, 90%);
		--astro-gradient: linear-gradient(0deg, #0247dc, #da62c4);
	}

	html {
		font-family: system-ui, sans-serif;
		font-size: var(--font-size-base);
		color: var(--color-text);
		background-color: var(--color-bg);
	}

	body {
		margin: 0;
	}

	main {
		margin: auto;
		padding: 1em;
		max-width: 60ch;
	}

	h1 {
		font-size: var(--font-size-xl);
		margin: 2rem 0;
		text-align: center;
	}

	.text-gradient {
		font-weight: 900;
		background-image: var(--astro-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 100% 200%;
		background-position-y: 100%;
		border-radius: 0.4rem;
		animation: pulse 4s ease-in-out infinite;
	}

	.text-right-italic {
		font-style: italic;
	}

	@keyframes pulse {
		0%,
		100% {
			background-position-y: 0%;
		}
		50% {
			background-position-y: 80%;
		}
	}

	.instructions {
		line-height: 1.6;
		margin: 1rem 0;
		background: #2e2e2e;
		padding: 1rem;
		border-radius: 0.4rem;
		color: var(--color-bg);
	}

	.link-card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
		gap: 1rem;
		padding: 0;
	}
</style>
